<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "item" },
        series: [
            {
                type: "pie",
                roseType: "area",
                itemStyle: { borderRadius: 5, borderWidth: 1, borderColor: "#e3ffff" },
                label: { show: true, color: "#428092", fontSize: 14, fontWeight: "bold", formatter: "{b}: {d}%" },
                labelLine: {
                    lineStyle: { width: 2 },
                },
                data: [
                    { value: 30, name: "小麦" },
                    { value: 25, name: "黄瓜" },
                    { value: 15, name: "土豆" },
                    { value: 20, name: "玉米" },
                    { value: 10, name: "大豆" },
                ],
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
});
</script>

<template>
    <section>
        <cite>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg>
            <h1>种植作物比例</h1>
        </cite>
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
